<template>
	<view class="content">
		<image :src="imagePath" class="content-index-image" mode="widthFix" v-if="!statusViewImage"></image>
		<text :user-select="true" class="content-text" v-else>{{ info.EQUITY_PARAMS_CONTENT ? info.EQUITY_PARAMS_CONTENT : info.EQUITY_PARAMS_REMARK }}</text>
	</view>
</template>

<script>
	// Import all possible images
	import geneticTestingImg from '../../static/image/geneticTesting.jpg'
	// import nutritionImg from '../../static/image/nutrition.jpg'
	// import healthImg from '../../static/image/health.jpg'
	// Import other images as needed

	export default {
		data() {
			return {
				pathType: "geneticTesting",
				imageMap: {
					geneticTesting: geneticTestingImg
					// Add other image mappings as needed
				},
				statusViewImage: false,
				info: {}
			}
		},
		computed: {
			imagePath(){
				return this.imageMap[this.pathType] || this.imageMap.geneticTesting
			} 
		},
		onLoad(options) {
			this.info = JSON.parse(options.info);
			if (this.info.EQUITY_TYPE && this.imageMap[this.info.EQUITY_TYPE]) {
				this.pathType = this.info.EQUITY_TYPE;
			}else{
				
				if(!this.imageMap[this.info.EQUITY_TYPE]){
					this.statusViewImage = true;
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
	}

	.content-index-image {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
	
	.content-text{
		display: inline-block;
		padding: 24rpx;
	}
</style>